<template>
  <div class="coupon-list">
    <!-- 搜索栏 -->
    <el-card class="mb-4">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="审核状态">
          <el-select filterable v-model="searchForm.auditStatus" clearable placeholder="请选择状态">
            <el-option label="审核中" value="0" />
            <el-option label="已过审" value="1" />
            <el-option label="未过审" value="2" />
          </el-select>
        </el-form-item>
        
        <!-- 时间筛选 -->
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            clearable
          ></el-date-picker>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  
    <!-- 列表 -->
    <el-table :data="tableData" style="width: 100%;margin-top: 15px" border>
      <!-- 表格内容保持不变 -->
      <el-table-column prop="id" label="ID" width="40" />
      <el-table-column prop="amount" label="消费金额" />
      <el-table-column prop="shopName" label="消费门店" />
      <el-table-column prop="shelf" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.auditStatus == 0" type="warning">审核中</el-tag>
          <el-tag v-else-if="scope.row.auditStatus == 1" type="success">已过审</el-tag>
          <el-tag v-else type="danger">未过审</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="evaluateCredit" label="预计积分" />
      <el-table-column prop="credit" label="积分" />
      <el-table-column prop="auditTime" label="审核时间" />
      <el-table-column prop="auditId" label="审核人" />
      <el-table-column prop="nickname" label="昵称" />
      <el-table-column prop="avatar" label="头像" width="90">
        <template slot-scope="scope">
          <el-image :src="scope.row.avatar || 'https://img.shihhl.com/shequ/mr.png'" :preview-src-list="[scope.row.avatar]" style="width: 60px; height: 60px;padding: 5px;"
            fit="cover" />
        </template>
      </el-table-column>
      <el-table-column prop="pics" label="图片">
        <template slot-scope="scope">
          <div v-for="item in scope.row.pics" :key="item" class="flex_flex">
            <el-image :src="item" :preview-src-list="scope.row.pics" style="width: 60px; height: 60px;padding: 5px;"
              fit="cover" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="上传时间" />
      <el-table-column label="操作" width="100" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" v-if="scope.row.auditStatus == 0" @click="handleEdit(scope.row)"
            v-has="'receipt:audit'">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
  
    <!-- 审核弹窗（保持不变） -->
    <el-dialog :close-on-click-modal="false"  title="小票审核" :visible.sync="dialogVisible" width="80%">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" class="dialog_height">
        <el-form-item label="积分">
          <el-input-number v-model="form.credit" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-radio-group v-model="form.auditStatus">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="拒绝原因" prop="reason" v-if="form.auditStatus == 2">
          <el-input type="textarea" rows="3" placeholder="请输入拒绝原因" v-model="form.reason">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAudit">确认</el-button>
      </span>
    </el-dialog>
  
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
  
<script>
import { Loading } from 'element-ui';

export default {
  name: 'CouponList',
  data() {
    return {
      searchForm: {
        auditStatus: '',
        dateRange: []  // 存储选择的日期范围（格式：['yyyy-MM-dd', 'yyyy-MM-dd']）
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      form: {
        id: '',
        credit: 0,
        auditStatus: 1,
        reason: ''
      },
      rules: {
        reason: [{ required: true, message: '请输入拒绝原因', trigger: 'blur' }],
      },
    }
  },
  async created() {
    this.getList()
  },
  methods: {
    // 获取列表数据 - 核心修改：处理日期格式
    async getList() {
      try {
        // 处理日期格式：拼接时间部分
        let startTime = ''
        let endTime = ''
        
        if (this.searchForm.dateRange && this.searchForm.dateRange.length === 2) {
          // 开始时间：选择的日期 + 00:00:00
          startTime = `${this.searchForm.dateRange[0]} 00:00:00`
          // 结束时间：选择的日期 + 23:59:59（确保包含整天）
          endTime = `${this.searchForm.dateRange[1]} 23:59:59`
        }

        const params = {
          page: this.currentPage,
          size: this.pageSize,
          condition: {
            ...this.searchForm,
            startTime,  // 带时间的开始日期
            endTime     // 带时间的结束日期
          }
        }
        // 移除原始日期范围，只传处理后的带时间格式
        delete params.condition.dateRange
        
        // 调用API
        const { data } = await this.$api.getReceiptList(params)
        data.result.records.forEach(item => {
          item.pics = item.pics.map(item => item.picUrl)
        })
        this.tableData = data.result.records
        this.total = data.result.total
      } catch (error) {
        console.error('获取列表失败：', error)
        this.$message.error('获取列表失败')
      }
    },
    
    // 其他方法保持不变
    handleEdit(row) {
      this.dialogVisible = true
      this.form.id = row.id
      this.form.credit = row.evaluateCredit || 0
    },
    handleSearch() {
      this.currentPage = 1
      this.getList()
    },
    resetSearch() {
      this.searchForm = {
        auditStatus: '',
        dateRange: []
      }
      this.handleSearch()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },
    async submitAudit() {
      const loading = this.$loading({
          lock: true,
          text: '提交中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.3)'
        });    
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          try {
            await this.$api.receiptAudit(this.form.id, {
              auditStatus: this.form.auditStatus,
              credit: this.form.credit,
              reason: this.form.reason
            })
            this.$message.success('审核成功')
            this.dialogVisible = false
            loading.close();
            this.getList()
          } catch (error) {
            console.error('审核失败：', error)
            this.$message.error('审核失败')
            loading.close();
          }
        }
      })
    },
  }
}
</script>
  
<style scoped lang="scss">
/* 样式保持不变 */
.dialog_height{
    height: 50vh;
    overflow: hidden;
    overflow-y: auto;
}
.flex_flex {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .coupon-list {
    padding: 20px;
  }
  
  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
    line-height: 178px;
  }
</style>